<template>
 <div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" :fullscreen="true" :before-close="handleClose" >
      <el-form  :inline="true" :rules="rules" ref="dataForm" size="mini" :model="temp" label-width="150px" >
        <div class="form-row">
          <el-form-item label="公司类型" prop="company_type" class="form-item-full">
              <el-radio v-model="temp.company_type" label="generated">自动生成</el-radio>
              <el-radio v-model="temp.company_type" label="normal">普通公司</el-radio>
              <el-radio v-model="temp.company_type" label="bding">开发中的客户</el-radio>
              <el-radio v-model="temp.company_type" label="client">已签约的客户</el-radio>
              <el-radio v-model="temp.company_type" label="history">历史客户</el-radio>
          </el-form-item> 
        </div>
        <div class="form-row">
          <el-form-item label="公司名称" prop="company_name" class="form-item">
            <el-input v-model="temp.company_name" style="width: 280px;"  ></el-input>
          </el-form-item>
          <el-form-item label="薪资架构" class="form-item">
            <el-input v-model="temp.salary_structure" style="width: 280px;" ></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="公司全称" prop="company_full_name" class="form-item">
            <el-input v-model="temp.company_full_name" style="width: 280px;" ></el-input>
          </el-form-item>
          <el-form-item label="公司产品" class="form-item">
            <el-input v-model="temp.company_products" style="width: 280px;" ></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="发票抬头" prop="invoice_title" class="form-item">
            <el-input v-model="temp.invoice_title" style="width: 280px;" ></el-input>
          </el-form-item>
          <el-form-item label="公司规模" prop="company_size" class="form-item">
            <el-input v-model="temp.company_size" style="width: 280px;" ></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="行业" prop="industry" class="form-item">
          <el-select v-model="temp.industry" placeholder="请选择" style="width: 280px;">
            <el-option
              v-for="item in industry_options"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="公司年产值" prop="annual_output_value" class="form-item">
            <el-input v-model="temp.annual_output_value" style="width: 280px;" ></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="城市" prop="city_path_arr" class="form-item">
            <el-cascader 
              v-model="temp.city_path_arr" 
              :options="city_cascader_options"
              :show-all-levels="false"
              :change-on-select="true"
              @change ="handleCityItemChange"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="公司同行竞争对手" prop="company_competitors" class="form-item">
            <el-input v-model="temp.company_competitors" style="width: 280px;" ></el-input>
          </el-form-item>
        </div>

        <div class="form-row">
          <el-form-item label="电话" prop="telephone" class="form-item">
            <el-input v-model="temp.telephone" style="width: 280px;" ></el-input>
          </el-form-item>
          <el-form-item label="上班时间" prop="work_shift" class="form-item">
            <el-input v-model="temp.work_shift" style="width: 280px;" ></el-input>
          </el-form-item>
        </div>

        <div class="form-row">
          <el-form-item label="网址" prop="website" class="form-item">
            <el-input v-model="temp.website" style="width: 280px;" ></el-input>
          </el-form-item>
          <el-form-item label="福利（保险、公积金）" prop="welfare" class="form-item">
            <el-input v-model="temp.welfare" style="width: 280px;" ></el-input>
          </el-form-item>
        </div>

        <div class="form-row">
          <el-form-item label="地址" prop="address" class="form-item">
            <el-input v-model="temp.address" style="width: 280px;" ></el-input>
          </el-form-item>
          <el-form-item label="福利（餐补、住宿、车补）" prop="welfare2" class="form-item">
            <el-input v-model="temp.welfare2" style="width: 280px;" ></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="邮箱" prop="email" class="form-item">
            <el-input v-model="temp.email" style="width: 280px;" ></el-input>
          </el-form-item>
          <el-form-item label="开户行" prop="bank_addr" class="form-item">
            <el-input v-model="temp.bank_addr" style="width: 280px;" ></el-input>
          </el-form-item>
        </div>

        <div class="form-row">
          <el-form-item label="银行账号" prop="a_c_no" class="form-item">
            <el-input v-model="temp.a_c_no" style="width: 280px;" ></el-input>
          </el-form-item>
           <el-form-item label="税号" prop="tax_num" class="form-item">
            <el-input v-model="temp.tax_num" style="width: 280px;" ></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="客户简介" prop="company_profile" class="form-item-full">
            <el-input  type="textarea" :rows="2" v-model="temp.company_profile" style="width: 480px;" ></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="匿名简介" prop="anonymous_profile" class="form-item-full">
            <el-input type="textarea" :rows="2" v-model="temp.anonymous_profile" style="width: 480px;" ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">{{$t('table.cancel')}}</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
        <el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
 </div>
</template>

<script>
import API from '@/utils/backend_api'
import Static_Data from '@/data/index'

const cityCascaderOptions = Static_Data.city.map((item) => {
  const item_children = []
  if (item.children && item.children.length > 0) {
    item.children.map(function(subitem) {
      item_children.push({ value: subitem.id, label: subitem.label })
    })
  }
  return { value: item.id, label: item.label, children: item_children }
})

export default {
  name: 'companyDialog',
  props: {
    id: {
      type: String,
      default: '' // 这样可以指定默认的值
    },
    visible: {
      type: Boolean,
      default: false // 这样可以指定默认的值
    },
    status: {
      type: String,
      default: 'create'
    }
  },
  components: { },
  data() {
    return {
      rules: {
        company_name: [{ required: true, message: '必填项', trigger: 'change' }],
        company_full_name: [{ required: true, message: '必填项', trigger: 'change' }],
        company_type: [{ required: true, message: '必选项', trigger: 'change' }],
        industry: [{ required: true, message: '必选项', trigger: 'change' }],
        city_path_arr: [
          { required: true, message: '必选项', trigger: ['blur', 'change'] }
        ]
      },
      city_cascader_options: cityCascaderOptions,
      industry_options: Static_Data.industry,
      temp: {
        id: '',
        company_name: '',
        city: '',
        city_path_arr: [],
        industry: '',
        sustainers: [],
        company_type: 'generated',
        company_full_name: '',
        telephone: '',
        website: '',
        address: '',
        email: '',
        company_profile: '',
        anonymous_profile: '',
        salary_structure: '',
        company_products: '',
        company_size: '',
        annual_output_value: '',
        company_competitors: '',
        work_shift: '',
        welfare: '',
        welfare2: '',
        relationship_level: '',
        status: '',
        a_c_no: '',
        bank_addr: '',
        tax_num: ''
      },
      dialogVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑公司',
        create: '新增公司'
      }
    }
  },
  filters: {
    valuetobool: function(value) {
      if (value) {
        return true
      }
      return false
    }
  },
  created() {
  },
  watch: {
    id: function(val, oldVal) {
    },
    visible: function(val, oldVal) {
      console.log('当前值为：' + val, '旧值为：' + oldVal)
      if (this.status === 'update' || this.id !== '') {
        API.company.get(this.id).then(response => {
          this.temp = response.data
          if (this.temp.city) {
            if (this.temp.city.length === 2) {
              this.temp.city_path_arr = [this.temp.city]
            }
            if (this.temp.city.length === 4) {
              this.temp.city_path_arr = [this.temp.city.substr(0, 2), this.temp.city]
            }
          }
          console.log(this.temp.city_path_arr)
          this.dialogStatus = 'update'
          this.dialogFormVisible = true
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        })
      } else {
        this.resetTemp()
      }
      this.dialogVisible = val
    },
    status: function(val, oldVal) {
      console.log('当前值为：' + val, '旧值为：' + oldVal)
      this.dialogStatus = val
    }
  },
  computed: {
  },
  methods: {
    resetTemp() {
      this.temp = {
        id: '',
        company_name: '',
        city: '',
        city_path_arr: [],
        industry: '',
        sustainers: [],
        company_type: 'generated',
        company_full_name: '',
        telephone: '',
        website: '',
        address: '',
        email: '',
        company_profile: '',
        anonymous_profile: '',
        salary_structure: '',
        company_products: '',
        company_size: '',
        annual_output_value: '',
        company_competitors: '',
        work_shift: '',
        welfare: '',
        welfare2: '',
        relationship_level: '',
        status: '',
        a_c_no: '',
        bank_addr: '',
        tax_num: ''
      }
    },
    handleCancel() {
      this.resetTemp()
      this.$emit('closeDialog', { type: 'cancel', data: {}})
    },
    handleClose() {
      this.resetTemp()
      this.$emit('closeDialog', { type: 'cancel', data: {}})
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          API.company.add(this.temp).then((response) => {
            console.log(response)
            this.resetTemp()
            this.$emit('closeDialog', { type: 'create_success', data: response.data })
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          API.company.update(tempData).then((response) => {
            this.resetTemp()
            this.$emit('closeDialog', { type: 'update_success', data: response.data })
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleCityItemChange(arr) {
      if (arr && arr.length > 0) {
        this.temp.city = arr[arr.length - 1]
      }
      console.log(this.temp.city)
    }
  }
}
</script>
<style scoped>
  .form-row {
    display: block;
  }
  .form-item {
    width: 40%
  }

  .form-item-full {
    width: 100%
  }
  .form-content{
    overflow:hidden;
    border: 1px solid #ddd;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    box-sizing: content-box;
    width: 80%;
    margin-left:5%;
  }
  .form-header {
    height: 40px;
    line-height: 15px;
    color: #676a6c;
    background-color: #F9F9F9;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid #ddd;
  }
  .form-table-border{
    margin: 1px 1px 1px 1px;
    border: 1px solid #ddd;
  }
  .form-header-button {
    float: right;
    margin: 0.3em 1em 0;
  } 
  .form-header-title{
    float: left;
    margin: 1.1em 1em 0.2em;
  }
  .select-item {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
  }
</style>

